<template>
  <div class="app-container">
    <!-- 余额查询 -->
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <div>
        <el-form-item label="客户名称">
          <el-select v-model="listQuery.fsiteNo" :disabled="this.$store.state.user.fsiteLevel == 3" clearable filterable
            placeholder="请选择客户名称">
            <el-option v-for="item in fsiteNoBelongOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="listQuery.ftaskno" class="filter-item" clearable placeholder="请选择部门">
            <el-option v-for="item in tsTaskuserlist" :key="item.ftaskno" :label="item.ftaskname" :value="item.ftaskno" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button round size="medium" class="filter-item"
            :style="{ background: buttonColor.lookup, color: buttonColor.color }" @click="handleFilter">查找</el-button>
        </el-form-item>
      </div>
      <div>

      </div>
    </el-form>

    <!-- 查询结果 -->
    <el-table :height="buttonColor.clientHeightTwo" v-loading="listLoading" :data="list" stripe
      element-loading-text="正在查询中。。。" border fit highlight-current-row :header-cell-style="tableColor">
      <el-table-column :width="buttonColor.operationTwo" align="center" label="操作" class-name="small-padding">
        <template slot-scope="scope">
          <div class="operationButton">
            <div
              :style="{ color:buttonColor.edit, cursor: 'pointer' }" @click="look(scope.row)">
              <img src="../../../public/images/look.png" />
              明细
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :width="buttonColor.line"
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column align="left" label="部门" prop="ftaskname" />
      <el-table-column align="left" label="余额" prop="money" />
    </el-table>
    <!-- 明细 -->
    <el-dialog :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="1500px" top="2vh">
      <div style="height: 30px;">
        <div style="text-align: center;">{{details}}</div>
    </div>
      <!-- 明细查询结果 -->
      <el-table v-loading="listLoading" :height="buttonColor.clientHeightTwo" :data="detailedlist" :header-cell-style="tableColor"
      stripe element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column :width="buttonColor.line" :index="indexMethod" align="center" label="序" type="index" />
      <el-table-column align="left" label="预存日期" prop="fchargedate" />
      <el-table-column align="left" label="预存单号" prop="fbillno" />
      <!-- <el-table-column align="left" label="部门名称" prop="ftaskname" /> -->
      <el-table-column align="left" label="预存人员" prop="fsiteName" />
      <el-table-column align="left" label="预存金额" prop="fchargeamt" />
      <el-table-column align="left" label="备注" prop="fexplanation" />
      <!-- <el-table-column align="left" label="单据状态" prop="fstate">
        <template slot-scope="scope">
          <span v-if="scope.row.fstate === 1">已确认</span>
          <span v-if="scope.row.fstate === 0">未确认</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column align="left" label="确认日期" prop="fupddate" /> -->
    </el-table>
    </el-dialog>
       <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}

.el-button+.el-button {
  margin-left: 1px
}

</style>

<script>
import { tcDailyaccountlist,tsTaskuserlist,tsTeamlist,tsTasklistMoney } from '@/api/labOrder/balance'
import { fsiteOptionsByLevel, getListArea} from '@/api/area'
import Pagination from "@/components/Pagination";
import moment from "moment";
import { tableColor, titleColor, buttonColor } from "@/filters/index";

export default {
  name: "TeamTask",
  components: {
    Pagination,
  },
  filters: {
  },
  data() {
    return {
      fsiteNoBelongOptions: [], // 客户列表
      buttonColor,
      list: null,
      detailedlist:null, //明细list
      total: 0,
      details:"明细",
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        fteamno: undefined, //团队
        ftaskno: undefined, // 部门
        // fsiteNo: this.$store.state.user.fsiteNo,
      },
      tsTeamlist: [], // 团队列表
      tsTaskuserlist: [], //部门
      fuseuserlist: [], // 预存人员列表
      dialogFormVisible: false,
      dialogStatus: '',
      tableColor: tableColor,
      titleColor: titleColor,
    };
  },
  created() {
    this.tsTeamlists(); //团队列表
    this.tsTaskuserlists(); //部门列表
    this.getListAreas();  //人员
    this.getList(); //余额列表
    // 客户列表
    fsiteOptionsByLevel(3)
      .then(response => {
        this.fsiteNoBelongOptions = response.data.data.list
      })
      .catch(() => {
        this.fsiteNoBelongOptions = []
      })
  },
  methods: {
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    timeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    //团队列表
    tsTeamlists() {
      console.log("团队列表")
      tsTeamlist().then((response) => {
        console.log(response.data.data.list)
        this.tsTeamlist = response.data.data.list
        // response.data.data.list.forEach((item) => {
        //   item.fchargedate = moment(item.fchargedate).format("YYYY-MM-DD HH:mm")
        // })
      })
        .catch(() => {
        })
    },
    //部门列表
    tsTaskuserlists() {
      console.log("部门列表")
      tsTaskuserlist().then((response) => {
        console.log(response.data.data.list)
        this.tsTaskuserlist = response.data.data.list
        // response.data.data.list.forEach((item) => {
        //   item.fchargedate = moment(item.fchargedate).format("YYYY-MM-DD HH:mm")
        // })
      })
        .catch(() => {
        })
    },
    //人员列表
    getListAreas() {
      console.log("人员列表")
      getListArea({ flag: 13, arg1: this.$store.state.user.fsiteNo })
        .then(response => {
          console.log(response)
          this.fuseuserlist=response.data.data.list
        })
        .catch(() => {
          this.fuseuserlist = []
        })
    },
    getList() {
      tsTasklistMoney(this.listQuery).then((response) => {
        response.data.data.list.forEach((item) => {

          var tsTeamlist = this.tsTeamlist
          for(var i in tsTeamlist){
            if(tsTeamlist[i].fteamno==item.fteamno){
              item.fteamname = tsTeamlist[i].fteamname
            }
          }
        })
        // console.log("list")
        // console.log(this.list)
        this.list = response.data.data.list;
        this.total = response.data.data.total;
        this.listLoading = false;

      })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    //部门明细列表
    detailedlists(row) {
      var detailedlists = {}
      detailedlists.ftaskno = row.ftaskno
      detailedlists.fsiteNo = row.fsiteNo
      tcDailyaccountlist(detailedlists).then((response) => {
        response.data.data.list.forEach((item) => {
          item.fchargedate = moment(item.fchargedate).format("YYYY-MM-DD")
          //预约人
          var fuseuserlist = this.fuseuserlist
          for(var i in fuseuserlist){
            // console.log(fuseuserlist[i].value)
            // console.log(item.fuseuser)
            if(fuseuserlist[i].value==item.fuseuser){
              item.fsiteName = fuseuserlist[i].label
            }
          }
          if(item.fupddate==null){
            item.fupddate = "--"
          }else{
            item.fupddate = moment(item.fupddate).format("YYYY-MM-DD")
          }
        })
        console.log("获取到值",response.data.data.list)
        this.detailedlist = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
      })
        .catch(() => {
          this.detailedlist = []
          this.total = 0
          this.listLoading = false
        })
    },
    look(row){
      console.log(row)
      this.details = row.ftaskname
      this.dialogFormVisible = true
      this.detailedlists(row)
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    indexMethod(index) {
      index = index + 1
      return index
    }
  },
};
</script>
